<template>
  <div class="main">
    <el-collapse v-model="state.activeNames" accordion>
      <el-collapse-item title="高度（full）" name="height">
        <el-button @click="state.table1.data.push({})">添加一行</el-button>
        <el-button type="danger" @click="state.table1.data.splice(0, 1)"
          >删除一行</el-button
        >
        <div class="content">
          <div style="height: 300px">
            <CzrTable
              :data="state.table1.data"
              :head="[{ label: '外层高度固定', value: 'p', show: true }]"
              :full="false"
              no-foot
            />
          </div>
          <div>
            <CzrTable
              :data="state.table1.data"
              :head="[{ label: '动态最大高度', value: 'p', show: true }]"
              :full="true"
              no-foot
              maxHeight="300px"
            />
          </div>
          <div>
            <CzrTable
              :data="state.table1.data"
              :head="[{ label: '不限制高度', value: 'p', show: true }]"
              :full="true"
              no-foot
            />
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item title="多选（selected）" name="selected">
        selected：{{ state.table2.selected }}
        <el-button
          @click="() => (state.table2.selected = [{ p1: 1 }, { p1: 3 }])"
          >选择1、3</el-button
        >
        <div style="height: 300px">
          <CzrTable
            :data="state.table2.data"
            :head="state.table2.head"
            :full="false"
            no-page
            id-key="p1"
            v-model:selected="state.table2.selected"
          />
        </div>
      </el-collapse-item>
      <el-collapse-item title="单选（singled）" name="singled">
        selected：{{ state.table2.singled }}
        <el-button @click="() => (state.table2.singled = { p1: 3 })"
          >选择3</el-button
        >
        <div style="height: 300px">
          <CzrTable
            :data="state.table2.data"
            :head="state.table2.head"
            :full="false"
            no-page
            id-key="p1"
            v-model:singled="state.table2.singled"
            :singleable="(scope) => scope.$index < 3"
          />
        </div>
      </el-collapse-item>
      <el-collapse-item title="行拖拽（dragable）" name="dragable">
        <div style="height: 300px">
          <CzrTable
            v-model:data="state.table2.data"
            :head="state.table2.head"
            id-key="p1"
            no-page
            :dragable="true"
          />
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script setup lang="ts">
import {
  computed,
  getCurrentInstance,
  onMounted,
  reactive,
  ref,
  watch,
} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { isValue } from '@/utils/czr-util'

const { proxy } = getCurrentInstance()
const state: any = reactive({
  activeNames: 'dragable',
  table1: {
    data: [],
  },
  table2: {
    head: [{ label: '参数1', value: 'p1', show: true }],
    data: [
      { p1: 1 },
      { p1: 2 },
      { p1: 3 },
      { p1: 4 },
      { p1: 5 },
      { p1: 6 },
      { p1: 7 },
      { p1: 8 },
    ],
    selected: [],
    singled: {},
  },
})
const ref_form = ref()

onMounted(() => {})
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  padding: 20px;
  overflow-y: auto;
  .content {
    display: flex;
    gap: 20px;
    > div {
      flex: 1;
      height: fit-content;
      border: 4px solid #ccc;
    }
  }
}
</style>
